<template>
	<view>
		<u-form class="refund_form" :model="form" ref="uForm" label-width='auto'>
			<u-form-item label="申请类型:" prop="applyType">
				<u-input disabled @click='applyTypeShow=true' v-model="form.applyType" type='select'
					placeholder="请选择申请类型" />
			</u-form-item>
			<u-form-item label="申请原因:" prop="applyReason">
				<u-input disabled @click='applyReasonShow=true' v-model="form.applyReason" type='select'
					placeholder="请选择申请原因" />
			</u-form-item>
		</u-form>
		<u-gap height="14" bg-color="#ECECEC"></u-gap>
		<view class="pic_box">
			<view class="pic_title">
				申请金额
			</view>
			<view class="pic_number">
				¥{{order.totalMoney}}
			</view>
		</view>
		<u-gap height="14" bg-color="#ECECEC"></u-gap>
		<view class="explain">
			<view class="explain_title">
				申请说明
			</view>
			<u-input v-model="form.applyInstructions" type='textarea'
				:custom-style='{backgroundColor: "#eee",borderRadius:"16rpx",padding:"10rpx"}' :height='300' />
		</view>
		<view style="padding: 30rpx;" class="">
			<u-button type="primary" shape="circle" @click="submit">提交申请</u-button>
		</view>
		<u-action-sheet @click="clickApplyType" :tips='{text:"请选择申请类型",color: "#333", fontSize: 36}'
			:list="applyTypeList" v-model="applyTypeShow"></u-action-sheet>
		<u-action-sheet @click="clickApplyReason" :tips='{text:"请选择申请原因",color: "#333", fontSize: 36}'
			:list="applyReasonList" v-model="applyReasonShow"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				applyTypeList: [{
					text: '我要退货退款'
				}, {
					text: '我要退货（无需退款）'
				}, {
					text: '我要换货'
				}],
				applyReasonList: [{
						text: '多拍，错拍，不想要了'
					}, {
						text: '不喜欢，效果不好'
					}, {
						text: '材质，面料与商品不符'
					},
					{
						text: '大小尺寸与商品描述不符'
					}, {
						text: '质量问题'
					}, {
						text: '发错货了'
					}
				],
				applyTypeShow: false,
				applyReasonShow: false,
				form: {
					applyType: '',
					applyReason: '',
					applyInstructions: ''
				},
				rules: {
					applyType: [{
						required: true,
						message: '请选择类型',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}],
					applyReason: [{
						required: true,
						message: '请选择原因',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}],

				},
				order: {}
			};
		},
		onLoad(e) {
			this.order = e.order && JSON.parse(e.order)
			console.log(this.order)
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			clickApplyType(index) {
				this.form.applyType = this.applyTypeList[index].text
			},
			clickApplyReason(index) {
				this.form.applyReason = this.applyReasonList[index].text
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (!this.form.applyInstructions) {
							uni.showToast({
								title: '请输入申请说明!',
								icon: 'none'
							})
							return
						}
						this.$u.api.addAfterSalesOrder({
							...this.form,
							...this.order,
							orderId: this.order.id
						}).then(res => {
							uni.showToast({
								title: '提交成功,请耐心等待审核!',
								icon: 'none'
							})
							uni.navigateTo({
								url: '/pages/order/order'
							})
						})
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.explain {
		padding: 30rpx;

		.explain_title {
			font-size: 28rpx;
			color: #000000;
			margin-bottom: 30rpx;
		}
	}

	.pic_box {
		padding: 30rpx;

		.pic_title {
			font-size: 28rpx;
			color: #000000;
			margin-bottom: 30rpx;
		}

		.pic_number {
			font-size: 60rpx;
			color: #000000;
			font-weight: 600;
		}
	}

	.refund_form {
		padding: 0 30rpx;
	}
</style>
